<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #aaffff;
				/* 背景图属性 */
				background-image: url(img/小新.png);
				/* 背景图大于空间--背景图尺寸属性：属性值 ① px  % 
				                                       ②contain 等比例缩放图片
													   ③cover 等比例放大图片
				*/
				background-size: 30% 30%;
				/* 背景图小于空间--平铺 */
				background-repeat: no-repeat;
				/* 背景图小于空间-->背景定位属性,属性值 x% y%  数值px 数值px  英文 */
				background-position: 20% 0;
				background-position: 100px 0;
				background-position: center center;
			}
			/* 背景图像固定模式：fixed固定模式-->理解：水印
			 先决条件：1.高度空间足够形成滚动条
			          2.引入背景图滚动模式：①等比例放大图片，覆盖整个容器
					                      ②等比例缩放图片，保证图片全部显示在容器中
					  3.背景图固定属性：background-attachment:fixed 固定到页面上
			 */
			body{
				/* 高度：100000px 形成滚动条 */
				height: 100000px;
				/* 滚动模式-->背景图如何滚动--属性background-size */
				background-size: contain;
				/* 引入图 */
				background-image: url("img/小新.png");
				background-repeat: no-repeat;
				/* 水印效果：背景图固定 */
				background-attachment: fixed;
				/* background背景属性：背景图片 背景重复 背景定位 背景尺寸 背景固定;
				 常用写法 background:背景图片 背景重复
				 */
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias mollitia voluptas assumenda, repellat provident praesentium sunt reprehenderit exercitationem similique atque sit aspernatur repudiandae molestiae soluta. Et eligendi similique cum non.
		Cumque, sed soluta ipsum at ipsa eveniet consequatur suscipit corporis dolorum architecto. A id quia, ipsa aut est magnam doloribus sint laboriosam eaque eius delectus sed dolore odio officia exercitationem.
		Debitis reprehenderit vitae incidunt maxime aliquam, molestias optio quaerat aspernatur eum nostrum! Suscipit magni dicta earum aut fugit, cumque rem dignissimos quisquam neque quidem unde nesciunt assumenda quos alias facilis?
		<div></div>
	</body>
</html>